<div class="layui-fluid">
    <div class="layui-card">
    <#--表格上方标题-->
        <div class="layui-card-header">
            设备信息管理
        </div>
    <#--表格-->
        <div class="layui-card-body">
        <#--表格上方的搜索按钮等-->
            <div class="layui-form-item">
                <div class="layui-inline">
                        <@shiro.hasPermission name="/device/add">
                            <a id="device_add" class="layui-btn layui-btn-normal" name="device_add_button">
                                <i class="layui-icon"></i>
                                <span>新增</span>
                            </a>
                        </@shiro.hasPermission>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 32px;">型号</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="search_deviceNo" id="search_deviceNo" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 50px;">设备名</label>
                    <div class="layui-input-inline" style="width: 140px;">
                        <input type="text" name="search_deviceName" id="search_deviceName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 32px;">楼栋</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="search_deviceRoomBuilding" id="search_deviceRoomBuilding" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 50px;">门牌号</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="search_deviceRoomNumber" id="search_deviceRoomNumber" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            <#--<div class="layui-inline">-->
            <#--<div class="layui-input-inline" style="width: 100px;">-->
            <#--<input type="text" name="search_deviceRoomNumber" id="search_deviceRoomNumber" placeholder="请输入" autocomplete="off" class="layui-input">-->
            <#--</div>-->
            <#--</div>-->
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary" name="device_search" onclick="device_search()">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary layui-border-blue" name="device_chart_01">
                        <i class="layui-icon layui-icon-chart-screen"></i>统计
                    </button>
                </div>
            </div>
        <#--表格-->
            <table class="layui-table" id="device_table" lay-filter="device_table" name="device_table"></table>
        </div>

    </div>
    <script type="text/html" id="device_table_Tpl" name="device_table_index">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
    <script type="text/html" id="device_bar" name="device_edit_copy_del">
        <@shiro.hasPermission name="/device/update">
            <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        </@shiro.hasPermission>
        <@shiro.hasPermission name="/device/copy">
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="copy">复制</button>
        </@shiro.hasPermission>
        <@shiro.hasPermission name="/device/del">
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
        </@shiro.hasPermission>
    </script>

</div>

<script>
    var baseUrl = $("script[baseUrl]").attr('baseUrl');
    var device_table_id = $("[name='device_table']").attr('id');
    var device_table_filter = $("[name='device_table']").attr('lay-filter');
    var device_table_index = $("[name='device_table_index']").attr('id');
    var device_edit_copy_del = $("[name='device_edit_copy_del']").attr('id');

    layui.use(['jquery', 'layer', 'table', 'element'], function () {
        var layer = layui.layer, table = layui.table, element = layui.element;
        layui.element.init();
        var classroomData = null;
        $.get(baseUrl + "/classroom/getRoom", function (data) {
            classroomData = data;
        });

        // 点击【添加】按钮
        $("[name='device_add_button']").on('click', function () {
            var index = layer.open({
                type: 2,
                content: baseUrl + '/device/goAdd',
                area: ['660px', '650px'],
                title: ['添加设备信息', 'font-size:18px;'],
                maxmin: false,
                end: function () {
                    table.reload(device_table_id, {});
                }
            });
            parent.layer.iframeAuto(index);
        });

        // 点击【统计】按钮
        $("[name='device_chart_01']").on('click', function () {
            var index = layer.open({
                type: 2,
                content: baseUrl + '/device/goSta1',
                area: ['660px', '650px'],
                title: ['设备信息统计', 'font-size:18px;'],
                maxmin: false
            });
            parent.layer.iframeAuto(index);
        });

        //表格渲染
        table.render({
            elem: '#' + device_table_id,
            url: baseUrl + '/device/getDevicePage3',
            method: 'post',
            page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']},
            cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {field: '', align: 'center', width: 70, title: '序号', toolbar: '#' + device_table_index, fixed: 'left'},
                {field: 'deviceNo', title: '设备型号', fixed: 'left'},
                {field: 'deviceName', title: '设备名称', fixed: 'left'},
                {
                    field: 'deviceClassroom', title: '楼栋', width: 90, sort: true, templet: function (d) {
                        for (j = 0; j < classroomData.length; j++) {
                            if (d.deviceClassroom === classroomData[j].id) {
                                return classroomData[j].roomBuilding;
                            }
                        }
                        return '';
                    }
                },
                {
                    field: 'deviceClassroom', title: '房号', width: 90, align: 'center', sort: true, templet: function (d) {
                        for (j = 0; j < classroomData.length; j++) {
                            if (d.deviceClassroom === classroomData[j].id) {
                                return classroomData[j].roomNumber;
                            }
                        }
                        return '';
                    }
                },
                {field: 'deviceFunction', title: '功能'},
                {field: 'deviceSource', title: '采购商'},
                {field: 'deviceProductionDate', title: '生产时间', sort: true, width: 110},
                {field: 'deviceServiceLife', title: '质保时间', sort: true, width: 110},
                {
                    field: 'deviceServiceLife', title: '质保剩余', align: 'center', templet: function (d) {
                        var startDate = Date.parse(d.deviceProductionDate);
                        var endDate = Date.parse(d.deviceServiceLife);
                        var now = new Date();
                        var totalDays = (endDate - startDate) / (24 * 60 * 60 * 1000);
                        var remainDays = parseInt((endDate - now) / (24 * 60 * 60 * 1000));
                        var percent = Number(remainDays / totalDays * 100).toFixed(0);
                        var color = (percent <= 15 ? 'red' : (percent <= 30 ? 'orange' : 'green'));
                        percent = (percent <= 0 ? 0 : percent) + "%";
                        return '        <div class="layui-progress layui-progress-big" lay-showpercent="true">\n' +
                                '            <div class="layui-progress-bar layui-bg-' + color + '" lay-percent="' + percent + '"></div>\n' +
                                '        </div>';
                    }
                },
                {field: 'deviceRemark', title: '更多信息'},
                {field: 'right', align: 'center', width: 200, toolbar: '#' + device_edit_copy_del, title: '操作', fixed: 'right'}
            ]],
            done: function (res, curr, count) {
                element.render('progress');
            }
        });
        layui.element.render('progress');
        //监听修改、复制、删除 按钮
        table.on('tool(' + device_table_filter + ')', function (obj) {
            var data = obj.data;
            // 响应【编辑】按钮
            if (obj.event === 'edit') {
                var index = layer.open({
                    type: 2,
                    content: baseUrl + '/device/goUpdate?id=' + data.id,
                    area: ['660px', '650px'],
                    title: ['修改设备信息', 'font-size:18px;'],
                    maxmin: false,
                    end: function () {
                        table.reload(device_table_id, {});
                    }
                });
                parent.layer.iframeAuto(index);

            }
            // 响应【复制】按钮
            else if (obj.event === 'copy') {
                var index2 = layer.open({
                    type: 2,
                    content: baseUrl + '/device/goCopy?id=' + data.id,
                    area: ['660px', '650px'],
                    title: ['复制设备信息', 'font-size:18px;'],
                    maxmin: false,
                    end: function () {
                        table.reload(device_table_id, {});
                    }
                });
                parent.layer.iframeAuto(index2);

            }

            // 响应【删除】按钮
            else if (obj.event === 'del') {
                layer.confirm('真的要删除此设备信息吗？<br>设备名称：' + data.deviceName + "<br>设备型号：" + data.deviceNo, function (index) {
                    // 写删除方法
                    $.post(baseUrl + "/device/del", {"id": data.id}, function (data) {
                        if (data.status === 200) {
                            layer.msg(data.message, {icon: 1, time: 1000});
                            // 前端修改
                            layer.close(index);
                            table.reload(device_table_id, {});
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1000});
                            layer.close(index);
                        }
                    });
                });
            }
        });
    });

    //监听搜索按钮点击事件
    function device_search() {
        // 获取表单对象
        var device_table = layui.table;
        // 获取检索词
        var search_deviceNo = $('#search_deviceNo').val();
        var search_deviceName = $('#search_deviceName').val();
        var search_deviceRoomBuilding = $('#search_deviceRoomBuilding').val();
        var search_deviceRoomNumber = $('#search_deviceRoomNumber').val();
        // 执行检索
        device_table.reload(device_table_id, {
            where: { //设定异步数据接口的额外参数
                deviceNo: search_deviceNo,
                deviceName: search_deviceName,
                deviceRoomBuilding: search_deviceRoomBuilding,
                deviceRoomNumber: search_deviceRoomNumber
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>

